<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.3.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<link rel="stylesheet" type="text/css" href="zouxiu.css"/>
		<script type="text/javascript" src="js/zouxiu.js"></script>
		
		<style type="text/css">
			.header #car{position: fixed;top: 50%;margin-top: -130px;right: 30px;
						width: 70px;height: 254px;z-index: 2;border: 1px solid #ccc;}
			.header #car ul li{width: 70px;height: 50px;line-height: 50px;text-align: center;
						border-bottom: 1px solid #ccc;}
			.header #car ul li:hover{background: #d69c1f;}
			.header #car #cart a{padding: 16px;}
			#box{width: 400px;height: 650px;/*border: 1px solid #ccc;*/position: relative;}
			#middleArea{width: 200px;height: 200px;background: rgba(255,255,255, 0.5);border: 1px solid #ccc;
						position: absolute;top: 0;left: 0;display: none;cursor: move;}
			#middleImg{width: 400px;height: 540px;border: 1px solid #ccc;overflow: hidden;}
			#small{width: 320px;height: 90px;margin-top: 10px;}
			#bigArea{width: 400px;height: 540px;border: 1px solid #ccc;position: absolute;
					left: 410px;top: 0;overflow: hidden;display: none;}
			#bigImg{width: 900px;height: 1200px;position: absolute;left: -200px;top: -500px;}
			#small ul li{float: left;width: 66px;height: 88px;border: 1px solid #ccc;margin-left: 10px;
						cursor: pointer;}
			#small ul li:first-child{margin-left: 0px;}
			#small ul li:hover{border: 1px solid #f40;}
			
			.text{width: 570px;height: 650px;/*border: 1px solid #ccc;*/position: absolute;
				right: 0;top: 50px;font-family: "微软雅黑";}
			.text p{line-height: 40px;}
			.text button{height: 37px;border-radius: 5px;color: #fff;font-size: 18px;
				font-family: "微软雅黑";border: 1px solid #ccc;}
			.text button:hover{opacity: 0.8;}
			.text .endTime span{color: #cf1700;font-size: 14px;}
			hr{border: none;height: 1px;background: #ccc;}
			
			 .box{width: 420px;height: 560px;background: #fff;position: fixed;
				top: 50px;right: 400px;display: none;z-index: 2;}
			 .box .reg{width: 420px;height: 50px;background: #f7f7f7;}
			 .box .reg ul li{float: left;width: 210px;height: 48px;
				border-bottom: 2px solid #f7f7f7;text-align: center;line-height: 50px;}
			 .box .reg ul li a{font-size: 16px;padding: 16px 70px;}
			 .box .reg ul li:hover{border-bottom: 2px solid #464646;font-weight: bold;}
			 .box input{height: 26px;border: 1px solid #ccc;margin-top: 20px;
				margin-left: 60px;padding: 5px;}
			 .box #btn1{height: 36px;width: 100px;margin-left: 12px;cursor: pointer;}
			 .box #btn2{width: 300px;height: 40px;background: #d2041f;position: absolute;
				left: 0px;bottom: 280px;border-radius: 20px;color: #fff;cursor: pointer;}
			 .box .wx{width: 280px;height: 32px;position: absolute;left: 70px;bottom: 200px;}	
			 .box .wx ul li{float: left;width: 32px;height: 32px;margin-right: 30px;}	
			 .box .wx ul li:last-child{margin-right: 0px;}	
			 .box .duanxin{display: block;position: absolute;}
			 .box .zhanghao{display: none;position: absolute;}
			 .box #guanbi{width: 40px;height: 25px;position: absolute;top: -25px;right: 0;
			 	background: #fff;text-align: center;line-height: 25px;cursor: pointer;}
		</style>
		<script type="text/javascript">
			$(function(){
				//等比公式
				//小图width/大图width == 小区域width/大区域width
				$("#middleArea").width( $("#middleImg").width()*$("#bigArea").width()/$("#bigImg").width() );
				$("#middleArea").height( $("#middleImg").height()*$("#bigArea").height()/$("#bigImg").height() );
				//放大系数
				var scale = $("#bigImg").width()/$("#middleImg").width();
				//在小图中移动
				$("#middleImg").mousemove(function(e){
					$("#middleArea").show();
					$("#bigArea").show();
					$("#middleArea").css("z-index",2);
					$("#bigArea").css("z-index",2);
					//
					var x = e.pageX - $("#middleImg").offset().left - $("#middleArea").width()/2;
					var y = e.pageY - $("#middleImg").offset().top - $("#middleArea").height()/2;
					//
					if(x < 0){x=0}
					else if( x > $("#middleImg").width()-$("#middleArea").width() ){
						 x = $("#middleImg").width()-$("#middleArea").width() 
					}
					if(y < 0){y=0}
					else if( y > $("#middleImg").height()-$("#middleArea").height() ){
						 y = $("#middleImg").height()-$("#middleArea").height() 
					}
					$("#middleArea").css({left:x,top:y});
					$("#bigImg").css({left:-x*scale,top:-y*scale});
				})
				//
				$("#middleImg").mouseleave(function(){
					$("#middleArea").hide();
					$("#bigArea").hide();
				})
				//
				$("#small ul li").mouseenter(function(){
					//console.log( $(this).index() )
					$("#middleImg img").attr("src","images/g"+($(this).index()+1)+"_402_536.jpg")
					$("#bigImg").attr("src","images/g"+($(this).index()+1)+"_900_1200.jpg")
				})
				
				//关闭侧边栏
				$("#close").click(function(){
					$("#car").hide()
				})
				
				//弹出界面
				$("#tanchu").click(function(){
					$(".box").show()
				})
				//弹出界面
				$("#tanchu2").click(function(){
					$(".box").show()
				})
				//关闭弹出界面
				$("#guanbi").click(function(){
					$(".box").hide()
				})
				$("#xx").click(function(){
					$(".duanxin").show();
					$(".zhanghao").hide();
				})
				$("#mm").click(function(){
					$(".zhanghao").show();
					$(".duanxin").hide();
				})
				//
				$("#scrollTop").click(function(){
					$(window).scrollTop(0)
				})
				
				//先获取数据
				var arr = [];
				$.get("json/goods.json",function(d){
					arr = d;
					for(var i=0;i<arr.length;i++){
						var obj = arr[i];
						var li = $("<li></li>").appendTo("#list");
						$("<img src="+obj.img+" >").appendTo(li);
						$("<p>"+obj.name+"</p>").appendTo(li);
						$("<p>"+obj.price+"</p>").appendTo(li);
						//console.log(obj.price)
					}
				})
				//
				//加入购物车
				$("#addToCart").click(function(){
					var index = $(this).index("#addToCart");
					var obj = arr[index];
					//console.log(index)
					//将当前的商品对象加入cookie购物车
					var goodsArr = $.cookie("cart") ?JSON.parse($.cookie("cart")) :[];
					var isExist = false; //默认cookie中不存在和我当前点击的相同商品
					for(var i=0;i<goodsArr.length;i++){
						if(goodsArr[i].id==obj.id){
							goodsArr[i].num++;//数量加1
							isExist = true;//说明存在相同的
						}
					}
					if(isExist == false){
						obj.num = parseInt($("#number").val());
						obj.checked = true;//默认是选中的
						goodsArr.push(obj)
					}
					$.cookie("cart",JSON.stringify(goodsArr),{expires:30,path:"/"})
					
				})
				//
				var num = $("#number").val();
				$("#sub").click(function(){
					num--;
					if(num<1) num=1;
					$("#number").val(num)
				})
				$("#add").click(function(){
					num++;
					$("#number").val(num)
				})
				//
				//活动结束时间
				var endTime = "2017-09-01 10:10:10";
				(function endTime(endTime){
					var timer = setInterval(function(){
						var d1 = new Date(endTime);//活动结束时间
						var d2 = new Date();//获取当前时间
						var timeInterval = parseInt( (d1-d2)/1000 );
						//console.log(timeInterval)
						if(timeInterval<=0){
							alert("活动结束");
							clearInterval(timer);
						}
						//
						var day = parseInt( timeInterval/(3600*24) );
						var hour = parseInt( (timeInterval/3600)%24 );
						var min = parseInt( (timeInterval/60)%60 );
						var sec = parseInt( timeInterval%60 );
						//
						day = day>=10 ? day : '0'+day;
						hour = hour>=10 ? hour : '0'+hour;
						min = min>=10 ? min : '0'+min;
						sec = sec>=10 ? sec : '0'+sec;
						
						$(".endTime").find("span").eq(0).html( day );
						$(".endTime").find("span").eq(1).html( hour );
						$(".endTime").find("span").eq(2).html( min );
						$(".endTime").find("span").eq(3).html( sec );
						
					},1000)
				})(endTime)
				
				
				
				
			})
		</script>
	</head>
	<body>
		<!--header-->
		<div class="header">
			<div class="main">
				<ul class="regist">
					<li><a href="denglu.html" title="登录/注册">登录/注册</a></li>
					<li>
						<a href="cart.html"><img src="images/zx_01.jpg"/>&nbsp;&nbsp;购物袋<span>0</span>件</a>
						<div class="cart">购物袋暂时没有商品</div>
					</li>
					<li>
						<a href="#">我的走秀&nbsp;<img src="images/zx_09.jpg"/>&nbsp;</a>
						<div class="bag">
							<ul>
								<li><a href="#">我的订单</a></li>
								<li><a href="#">自助退货</a></li>
								<li><a href="#">我的收藏</a></li>
								<li><a href="#">帮助中心</a></li>
								<li><a href="#">全部吐槽</a></li>
							</ul>
						</div>
					</li>
				</ul>
				<div class="logo"><a href="http://www.xiu.com/"><img src="images/zx_03.jpg"/></a></div>
				<ul class="fenlei">
					<li><a href="http://www.xiu.com/#s_id=1_32146_4_0" style="border-bottom: 2px solid #aaa;">首页</a></li>
					<li><a href="http://www.xiu.com/cx/150463.shtml#s_id=1_32146_4_1">新品</a></li>
					<li><a href="http://www.xiu.com/cx/150450.shtml#s_id=1_32146_4_2">男士</a></li>
					<li><a href="http://www.xiu.com/cx/150451.shtml#s_id=1_32146_4_3">女士</a></li>
					<li><a href="http://www.xiu.com/brand.html#s_id=1_32146_4_4">品牌</a></li>
					<li><a href="http://www.xiu.com/cx/168850.shtml#s_id=1_32146_4_5" style="color: red;">发现</a></li>
					<li><a href="http://www.xiu.com/cx/150278.shtml#s_id=1_32146_4_6">专题</a></li>
					<li><a href="http://app.xiu.com/#s_id=1_32146_4_7">手机走秀</a></li>
				</ul>
				<div class="search">
					<input type="text" id="searchBtn" value="请搜索Opening Ceremony试试"/>
					<a href="#"><img src="images/zx_06.jpg"/></a>
				</div>
				
			</div>
			<div id="car">
				<ul>
					<li id="close"><a href="#">关闭</a></li>
					<li><a href="#">在线客服</a></li>
					<li id="cart"><a href="cart.html" target="_blank">购物袋</a></li>
					<li><a href="#">我要吐槽</a></li>
					<li id="scrollTop"><a href="#">回到顶部</a></li>
				</ul>
			</div>
		</div>
		
		<!--nav-->
		<div class="nav">
			<div class="main">
				<ul class="item">
					<li><a href="#">包袋</a></li>
					<li><a href="#">服装</a></li>
					<li><a href="#">鞋靴</a></li>
					<li><a href="#">腕表</a></li>
					<li><a href="#">配饰</a></li>
					<li><a href="#">妆品</a></li>
					<li><a href="#">生活</a></li>
					<li><a href="#">婴童</a></li>
					<li><a href="#">豪车</a></li>
				</ul>
			</div>
		</div>
		
		<!--banner-->
		<div class="banner" style="height: 800px;">
			<div class="main"  style="width: 1000px;height: 700px;position: relative;">
				<p><img src="images/triangel.png"/> 你的位置:<a href="#">走秀首页</a>> 【品牌直供】纯天然植物性护发焗油白发用染发膏2支套装200g*2 赠染发刷具1个</p>
				<hr style="margin-bottom: 20px;"/>
				<div id="box">
					<div id="middleImg">
						<img src="images/g1_402_536.jpg"/>
						<div id="middleArea"></div>
					</div>
					<div id="small">
						<ul id="#list">
							<li><img src="images/g1_66_88.jpg"/></li>
							<li><img src="images/g2_66_88.jpg"/></li>
							<li><img src="images/g3_66_88.jpg"/></li>
							<li><img src="images/g4_66_88.jpg"/></li>
						</ul>
					</div>
					<div id="bigArea">
						<img src="images/g1_900_1200.jpg" id="bigImg"/>
					</div>
				</div>
				
				<div class="text">
					<h3 style="font-weight: bold;">【品牌直供】纯天然植物性护发焗油白发用染发膏2支套装200g*2 赠染发刷具1个</h3>
					<p>品&nbsp;&nbsp;&nbsp;&nbsp;牌： LPLP 已有171条品牌评论<span>&nbsp;&nbsp;商品编号：65015936</span></p>
					<hr />
					<p>走&nbsp;&nbsp;秀&nbsp;&nbsp;价：&nbsp;&nbsp;<span style="font-size: 20px;color: #cf1700;">￥420</span></p>
					<p class="endTime"><img src="images/clock.png"/>剩&nbsp;&nbsp;余：&nbsp;&nbsp;&nbsp;<span>12</span>天<span>12</span>时<span>12</span>分<span>12</span>秒</p>
					<p>发&nbsp;&nbsp;货&nbsp;&nbsp;地：&nbsp;&nbsp;<span style="font-size: 16px;color: #ea7511;">日本.东京&nbsp;&nbsp;&nbsp;&nbsp;预计5-9个工作日送达</span></p>
					<p>税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费：&nbsp;&nbsp;<span>由海外卖家承担</span></p>
					<hr />
					<p>颜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色：&nbsp;&nbsp;
						<a href="javascript:;" style="border: 2px solid #ff6701;padding: 1px 7px;">珍珠白</a></p>
					<p>尺&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：&nbsp;&nbsp;
						<a href="javascript:;" style="border: 2px solid #ff6701;padding: 1px 7px;">均码</a></p>
					<p>数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量：&nbsp;&nbsp;<span>
						<input type="button" id="sub" value="-" />
						<input type="text" id="number" value="1" style="width: 20px;"/>
						<input type="button" id="add" value="+" />
					</span></p>
					<p><a href="#">由日本JC药妆专卖店提供&nbsp;&nbsp;</a>由走秀网提供售后服务</p>
					<button style="width: 155px;background: #f27626;" id="tanchu">立即购买</button>
					<button style="width: 155px;background: #74b555;" id="addToCart" title="放入购物袋">放入购物袋</button>
					
					<button style="width: 60px;background: #f2f2f2;color: black;" id="tanchu2">收藏</button>
					<p>电话订购：<span style="font-size: 16px;color: #ea7511;">400-888-4499 </span>（08:00-24:00）</p>
				</div>
			</div>
		</div>
		
			
		<!--弹出登录页面-->
		<div class="box">
			<div id="guanbi">关闭</div>
			<div class="reg">
				<ul>
					<li><a href="javascript:;" id="xx">短信登录</a></li>
					<li><a href="javascript:;" id="mm">密码登录</a></li>
				</ul>
			</div>
			<!--短信登录-->
			<div class="duanxin">
				<input type="text" placeholder="手机号码" style="width: 290px;" id="phone"/>
				<input type="text" placeholder="短信验证码" style="width: 170px;" id="code"/>
				<input type="button" value="获取验证码" id="btn1"/>
				<p style="line-height: 60px;position: absolute;left: 60px;" id="tip">提示文字</p>
				<p style="line-height: 60px;position: absolute;right: 60px;"><a href="#">找回密码</a></p>
			</div>
			
			<!--账号密码登录-->
			<div class="zhanghao">
				<input type="text" placeholder="手机号/邮箱/用户名" style="width: 290px;" id="name"/>
				<input type="password" placeholder="密码" style="width: 290px;" id="pwd"/>
				<p style="line-height: 60px;position: absolute;left: 60px;" id="tip">提示文字</p>
				<p style="line-height: 60px;position: absolute;right: 60px;"><a href="#">找回密码</a> | <a href="#">注册账号</a></p>
			</div>
			<input type="submit" id="btn2" value="登录" />
			<div class="wx">
				<ul>
					<li><a href="#"><img src="images/dl_06.jpg"/></a></li>
					<li><a href="#"><img src="images/dl_08.jpg"/></a></li>
					<li><a href="#"><img src="images/dl_10.jpg"/></a></li>
					<li><a href="#"><img src="images/dl_12.jpg"/></a></li>
					<li><a href="#"><img src="images/dl_14.jpg"/></a></li>
				</ul>
			</div>
			<a href="#" style="position: absolute;bottom: -7px;right: 0;"><img src="images/dl_22.jpg"/></a>
		</div>
	
		<!--footer-->
		<div class="footer">
			<div class="main">
				<ul class="kefu">
					<li><a href="#" title="在线客服"><img src="images/zx_31.jpg"/>&nbsp;&nbsp;<span>在线客服</span></a></li>
					<li><a href="#"><img src="images/zx_34.jpg"/>&nbsp;&nbsp;400-800-600</a></li>
					<li><a href="#" title="我要吐槽"><img src="images/zx_53.jpg"/>&nbsp;&nbsp;我要吐槽</a></li>
				</ul>
				<ul class="zhao">
					<li><a href="#">招贤纳士</a></li>
					<li><a href="#">CEO邮箱</a></li>
					<li><a href="#">售后服务</a></li>
					<li><a href="#">常见问题</a></li>
					<li><a href="#" title="商品为海外商品，关税由海外卖家承担，如顾客接海关或物流通知缴纳税费，请先行按照国家规定支付，再凭纳税凭证联系走秀客服找海外卖家报销。">关税说明</a></li>
					<li><a href="#">物流配送</a></li>
				</ul>
				<div class="cen">
					<h2>&nbsp;&nbsp;</h2>
					<ul class="wx">
						<li><a href="#"><img src="images/zx_37.jpg"/><img src="images/zx-wx.png" class="zxwx"/></a></li>
						<li><a href="#"><img src="images/zx_39.jpg"/><img src="images/zx-wb.png"/></a></li>
						<li><a href="#"><img src="images/zx_41.jpg"/><img src="images/zx-wei2.png"/></a></li>
						<li><a href="#"><img src="images/zx_43.jpg"/><img src="images/zx-face.png"/></a></li>
					</ul>
					<div class="int">
						<input type="text" placeholder="订阅最新时尚资讯邮件"/>
						<a href="#"><img src="images/zx_51.jpg"/></a>
					</div>
				</div>
				<div class="shao">
					<h3>我们的APP</h3>
					<a href="#"><img src="image/weixinQr.jpg"/></a>
				</div>
			</div>
		</div>
		<!--bottom-->
		<div class="bottom">
			<div class="main">
				<ul class="bo-list">
					<li><a href="#">关于走秀</a></li>
					<li><a href="#">About us</a></li>
					<li><a href="#">媒体报道</a></li>
					<li><a href="#">品牌招商</a></li>
					<li><a href="#">加入走秀</a></li>
					<li><a href="#">网站地图</a></li>
					<li><a href="#">联系我们</a></li>
					<li><a href="#">品牌大全</a></li>
					<li><a href="#">邮件订阅</a></li>
					<li><a href="#" style="border: none;">WAP站点</a></li>
				</ul>
				<ul class="bo-list2">
					<li><a href="#" title="海外直发"><img src="images/zx_57.jpg"/><span>海外直发</span></a></li>
					<li><a href="#" title="正品保证"><img src="images/zx_59.jpg"/><span>正品保证</span></a></li>
					<li><a href="#" title="售后保障"><img src="images/zx_61.jpg"/><span>售后保障</span></a></li>
				</ul>
				
				<p class="copy">Copyright &copy; 2008-2017 <a href="#">Xiu.com</a>深圳走秀网络科技有限公司 版权所有 . <a href="#">粤ICP备07502993号</a></p>
				
				<ul class="police">
					<li><a href="#"><img src="image/c_01.jpg"/></a></li>
					<li><a href="#"><img src="image/c_11.jpg"/></a></li>
					<li><a href="#"><img src="image/c_04.jpg"/></a></li>
					<li><a href="#"><img src="image/c_08.jpg"/></a></li>
					<li><a href="#"><img src="image/c_09.jpg"/></a></li>

				</ul>
				
			</div>
		</div>
	</body>
</html>
